<template>
    <div class="row">
        <div class="box">
            <div class="settings-inner-blk p-0">
                <div class="sell-course-head comman-space">
                    <div class="d-flex align-items-center justify-content-between">

                        <div>
                            <h3>我的学生</h3>
                            <p>您累积教授学生：243，正在教授的学生：12</p>
                        </div>
                        <div class="ticket-btn-grp">
                            <a href="#" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#addstudent">创建学生</a>

                            <!-- <router-link to="/teacher/student-add" class="btn btn-primary">
                            创建学生
                            </router-link> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <app-list-view :list="list" to="/teacher/student-detail" :total="total" :params="params" />

            <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange" />

        </div>
    </div>

    <div class="modal-styles modal fade" id="addstudent" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加学生</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="addpaymethod-form add-course-info">
                        <form action="#">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-control-label">姓名</label>
                                        <input type="text" v-model="formData.name" class="form-control"
                                            placeholder="请输入学生姓名">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">手机号</label>
                                        <input type="text" v-model="formData.telephone" class="form-control"
                                            placeholder="请输入手机号">
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">性别</label>

                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio_gender" v-model="formData.gender"
                                                    :value="1">
                                                <span class="checkmark"></span> 男
                                            </label>
                                            <label class="radio-inline custom_radio">
                                                <input type="radio" name="optradio_gender" v-model="formData.gender"
                                                    :value="0">
                                                <span class="checkmark"></span> 女
                                            </label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-theme" @click="save">保存</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const list = ref([])
const total = ref(0)
const params = reactive({
    pageIndex: 1,
    pageSize: 10
})
const formData = reactive({
    name: '张小飞',
    telephone: '13612345678',
    gender: 1
})

const save = async () => {
    $('#addstudent').modal('hide')
    await studentApi.add(formData)
    search()
}
const pageChange = async (e) => {
    params.pageIndex = e
    await search()
}
const edit = (e) => {
    formData.title = e.title
    formData.telephone = e.telephone
    formData.type = e.type
    $('#addstudent').modal('show')
}
const del = async (e) => {
    await studentApi.del(e)
    search()
    console.log(e)
}
const search = async () => {
    const res = await studentApi.getList(params)
    console.log(res)
    list.value = res.list
    total.value = res.pager.total
}

onMounted(async () => {
    await nextTick();
    await search();
})
</script>